<!-- 个人中心页面 -->
<template>
	<view>
		<!-- 未登录 -->
		<tempalte v-if="!loginStatus">
			<view class="flex align-center justify-center py-2 font">
				登录社区，体验更多功能
			</view>
			<otherLogin></otherLogin>
			<view class="flex align-center justify-center py-2 font text-secondary" @click="openLogin">
				账号/邮箱/手机登录 <text class="ml-1 iconfont icon-jinru"></text>
			</view>
		</tempalte>
		<!-- 已登录 -->
		<!-- 头部 昵称头像-->
		<view v-else class="flex align-center px-2">
			<image :src="avatarImg" style="width: 100rpx;height: 100rpx;" class="rounded-circle"></image>
			<view class="flex flex-column flex-1 px-2">
				<text class="font-lg font-weight-bold text-dark">
					{{!user.username?'昵称':user.username}}
				</text>
			<text class="font text-muted mt-1">总帖子{{myDate[0].num}} 今日发帖{{myDate[1].num}}</text>
			</view>
			<text class="iconfont icon-jinru"></text>
		</view>
		<!-- 帖子 ,动态，评论 ，粉丝-->
		<view v-if="loginStatus" class="flex align-center px-3 py-2">
			<view class="flex-1 flex flex-column align-center justify-center" v-for="(item,index) in myDate" :key="index">
				<text class="font-lg font-weight-bold">{{item.num}}</text>
				<text class="font text-muted">{{item.name}}</text>
			</view>
		</view>
		<!-- 图片展示模块 -->
		<view class="px-3 py-2">
			<image src="../../static/bgimg/banner3.jpg" mode="aspectFill"
			style="height: 170rpx;width: 100%;" class="rounded"></image>
		</view>
		<!-- 列表 -->
			 <uni-list-item title="浏览历史" showArrow clickable @click="openHistory">
			 	<template v-slot:header>
			 		<view class="slot-box">
			 			<text class="iconfont icon-liulan mr-1 font-md"></text>
			 		</view>
			 	</template>
			 </uni-list-item>
			 <uni-list-item title="社区认证" showArrow>
			 	<template v-slot:header>
			 		<view class="slot-box">
			 			<text class="iconfont icon-huiyuanvip mr-1 font-md"></text>
			 		</view>
			 	</template>
			 </uni-list-item>
			 <uni-list-item title="审核帖子" showArrow>
			 	<template v-slot:header>
			 		<view class="slot-box">
			 			<text class="iconfont icon-keyboard mr-1 font-md"></text>
			 		</view>
			 	</template>
			 </uni-list-item>
			 <!-- #ifndef APP-PLUS -->
			 <uni-list-item title="进入设置" showArrow clickable @click="onUserSet">
			 	<template v-slot:header>
			 		<view class="slot-box">
			 			<text class="iconfont icon-shezhi mr-1 font-md"></text>
			 		</view>
			 	</template>
			 </uni-list-item>
			 <!-- #endif -->
	</view>
</template>

<script>
	// 引入 微信 新浪 第三方登录 组件
	import otherLogin from '@/components/common/other-login.vue'
	// 引入vuex
	import {mapState} from 'vuex'
	export default {
		components:{
	   	otherLogin	
		},
		data() {
			return {
				// 帖子，动态，数量数据
				myDate:[{ 
					name:'帖子', // 总发帖量
					num:0,
				},{
					name:'动态', // 今日发帖量
					num:0,
				},{
					name:'评论',
					num:0,
				},{
					name:'粉丝',
					num:0,
				}]
			}
		},
		// 监听原生 标题栏 按钮点击事件
		onNavigationBarButtonTap() {
			// 跳转到设置页面
			uni.navigateTo({
				url:'../user-set/user-set'
			})
		},
		computed:{
			// 导入vuex中 state数据
			...mapState({
				// 定义的参数loginStatus，判断登录状态
				loginStatus:state=>state.loginStatus,
				// 获取用户信息,渲染页面
				user:state=>state.user
			}),
			// 判断用户 头像图片，是否存在
			avatarImg(){
				return this.user.userpic?this.user.userpic:'/static/default.jpg'
			}
		},
		// 监听 页面显示
		onShow() {
			// 如果 用户登录了，才去调用事件
			if(this.loginStatus){
				this.getCunts()
			}
		},
		// 监听 登录状态
		watch:{
		 	loginStatus(newValue,oldValue){
				if(newValue){ // 如果登录了，调用事件
				    // 防止页面未刷新
					this.getCunts()
				}
			}
		},
		methods: {
			 // #ifndef APP-PLUS
			onUserSet(){
				// 跳转到设置页面
				uni.navigateTo({
					url:'../user-set/user-set'
				})
			},
			// #endif
			// 请求 统计用户相关 数据  接口 
			getCunts(){
				this.$H.get('/user/getcounts/'+this.user.id,{},{
					token:true,
					notoast:true
				}).then(res=>{
					this.myDate[0].num=res.post_count // 总发帖量
					this.myDate[1].num=res.today_posts_count // 今日帖量
					this.myDate[2].num=res.comments_count // 评论数
					this.myDate[3].num=res.withfen_count // 粉丝数
				})
			},
			// 跳转到登录页
			openLogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			// 跳转 浏览历史 页面
			openHistory(){
				uni.navigateTo({
					url:'../history/history'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
